<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>流浪狗认领网站  主页</title>
	<jsp:include page="top_utils.jsp"></jsp:include>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	
	
</head>

<body>
	<!-- 头部-->
	<div class="headnav">
		<div class="topBar">
			<div class="topBarL">
				<jsp:include page="logo.jsp"></jsp:include>
				<div class="nav">
					<ul>
						<li class="on">
							<a href="${pageContext.request.contextPath }/">首页</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath }/news/">新闻</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath }/adopt/">领养</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath }/knowledge/">知识</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath }/dangdang/index.html">商城</a>
						</li>
					</ul>
				</div>
			</div>
			
			<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/login.css"/>
			<jsp:include page="topBarR.jsp"></jsp:include>
		</div>
	</div>

	<!-- 中间内容-->
	<div class="wp">
		<div class="contents">
			<div class="divtop" >
				<div class="divtop-left" >
					<p>● 旅游领养日 25只狗狗找到了家/2017-1-25 <a href="">[点击查看]</a></p>
				</div>
				<div class="divtop-right">
					<a href="" class="btn btn-default btn-sm" type="button">官方微博</a>
				</div>
			</div>
			<div class="inner">
				<div class="inner-left">
					<div class="imgs">
						<div class="imgs-left">
							<a href="" id="img_choosed_a" target="_blank" title="" >
								<img id="img_choosed" src="">
							</a>
						</div>
						<div class="imgs-right">
							<ul id="news_four" style="margin-top: 5px;">
								
							</ul>
						</div>
					</div>
					
					<div class="newadoption">
						<div class="dopt-tip">
							<h4>
								最新领养
							</h4>
							<div class="count">
								<i></i>
								 总共
								<strong id="size">3</strong>
								篇 
								<em></em>
							</div>
						</div>
						<div class="dopt-list">
							<ul id="zxadopt">
								
							</ul>
						</div>
						<div class="dopt-button">
							<a href="javascript:">阅读更多+</a>
						</div>
					</div>
				</div>


				<div class="inner-right" id="right_news">
					<div class="r-top">
						<a href="" target="_blank">
							<img src="images/client/right/top-1.jpg" width="278px">
						</a>
					</div>
					
					<div class="kuaixun">
						<div class="kx-title">
							<h3>最新文章</h3>
							<a href="" target="_blank">MORE&gt;</a>
						</div>
						<ul class="kx-ul" id="kx">
							
						</ul>
					</div>
	
	
	
					<!-- 广告图片-->
					<div class="guangao">
						<a href="" target="_blank">
							<img src="images/client/right/guanggao.jpg">
						</a>
					</div>

					<!--宠物百科-->
					<div class="cwbk">
						<div class="cwbk-title">
							<h3>宠物百科</h3>
							<a rel="nofollow" href="" target="_blank">MORE&gt;</a>
						</div>
						<ul class="cwbk-ul" id="zrzs">
							<li>
								<div class="img">
									<a href="" target="_blank"> 
										<img src="images/client/right/cwbk-1.jpg" width="90" height="60"> 
									</a> 
								</div>
								<div class="word"> 
									<a href="" target="_blank">
						      			<h4 class="name">巨型淡水龙虾</h4>
						      		</a>
						      	</div>
							</li>
						</ul>
					</div>

					<!--微信二维码-->
					<div class="wxewm">
						<div class="ewm-img">
							<img src="images/client/right/ewm.jpg">
						</div>
					</div>
				</div>
			</div>

			<!-- 其他 -->
			<div class="mainother">
				<div class="partnerstitle"></div>
				<div class="partnersimg">
					<a href="http://www.hao123.com/" target="_blank">
						<img src="images/client/bottom/logo1.jpg" alt="hao123上网导航">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.goumin.com/" target="_blank">
						<img src="images/client/bottom/logo2.jpg" alt="狗民网">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.aigou.com/" target="_blank">
						<img src="images/client/bottom/logo3.jpg" alt="爱狗网">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.mypethome.com/" target="_blank">
						<img src="images/client/bottom/logo4.jpg" alt="宠物之家">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.chinapet.com/" target="_blank">
						<img src="images/client/bottom/logo5.jpg" alt="宠物中国">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.ttpet.com/" target="_blank">
						<img src="images/client/bottom/logo6.jpg" alt="天天宠物网">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.ichong123.com/" target="_blank">
						<img src="images/client/bottom/logo7.jpg" alt="爱宠网">
					</a>
				</div>
				<div class="partnersimg">
					<a href="http://www.ganji.com/" target="_blank">
						<img src="images/client/bottom/logo8.jpg" alt="赶集网">
					</a>
				</div>
			</div>
			
			<!-- 其他链接 -->
			<jsp:include page="links_html.jsp"></jsp:include>
		</div>
	</div>

	<!-- 底部-->
	<div class="footer">
		<div class="ft">
			<div class="footer-left">		
				<p>"© 2016-2017 "&nbsp;&nbsp;<a href="" target="_blank">流浪狗认领网站</a>
				&nbsp;&nbsp;PETLY 湘ICP备11010768号-4</p>
			</div>

			<div class="footer-right">
				<a href="http://www.petly.net/aboutus/index.html" target="_blank" title="">关于我们</a>
				<span></span>
				<a href="http://www.petly.net/aboutus/remind.html" target="_blank" title="">领养提示</a>
				<span></span>
				<a href="http://www.petly.net/aboutus/help.html" target="_blank" title="">使用帮助</a>
				<span></span>
				<a href="http://www.petly.net/aboutus/cooperation.html" target="_blank" title="">商务合作</a>
				<span></span>
				<a href="http://www.petly.net/aboutus/contact.html" target="_blank" title="">联系我们</a>
			</div>
		</div>

		<!-- 回到顶部 -->
		<div id="share" title="回到顶部" style="display:none;">
			<a id="totop" title="返回顶部">顶部</a>
		</div>
	</div>
</body>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath }/js/head.js"></script>
<script type="text/javascript">
	$("#totop").on("click",function (){
		//点击事件，回到html顶部
		$('body,html').animate({scrollTop:0},500);
	});
	
	
	
	window.onload=function (){
			//获取轮播图
			//1.调用后台news action的top_img的方法
			$.post("/dogstore/news/top_img",
				{	
					size:4
				},
				//返回的result是一个文章的对象数组list
				function (result){
					//是否为空
					if(result != null){
						//java数据类型   ：  [[name="dw"],[name="ck"]]
						//json数据类型   ：  [{{name:"dw"},{sex:"boy"}},{{name:"ck"},{sex:"girl"}}]
						//给这个list转成json数据类型
						var list = JSON.parse(result);
						
						//先给原区域为空，初始化
						$("#news_four").html("");
						
						//jquery的遍历的方法      list是已经转成json的对象集合，i是指遍历的序号，item是指第i个文章json对象 
						$.each(list,function(i,item){
							//console.log(item.title);
							//当取出第一个文章的时候，多一个class样式on;每个li加一个点击事件
							if(i == 0){
								$("#news_four").append(""+
									"<input type=hidden id='choose_one' url='"+item.imgurl+"' aid='"+item.id+"' title='"+item.title+"' />"+
									"<input type=hidden id='nextnum' value=1 />"+
									"<li class='news_four on' onclick='choose(this,"+item.id+",this.id,this.title)' aid='"+item.id+"' title='"+item.title+"' id='"+item.imgurl+"' >"+
										"<div class='color1'>"+
											item.title+
										"</div>"+
									"</li>"
									
								);
							}else{
								$("#news_four").append(""+
									"<li class='news_four' onclick='choose(this,"+item.id+",this.id,this.title)' aid='"+item.id+"' title='"+item.title+"' id='"+item.imgurl+"' >"+
										"<div class='color1'>"+
											item.title+
										"</div>"+
									"</li>"
								);
							}
						});
						//选取class为on的文章的封面图片为轮播大图片
						var url = $("#choose_one").attr("url");
						var title = $("#choose_one").attr("title");
						var id = $("#choose_one").attr("aid");
						$("#img_choosed").attr("src",url);	
						$("#img_choosed_a").attr("href","/dogstore/news/detail?key="+id);
						$("#img_choosed_a").attr("title",title);
						
						//定时切换图片 
				        setInterval(function () {
				        	var index = $("#nextnum").val();
				        	var next;
				        	if(index < 4){
				        		next = $(".news_four.on").next();
				        		console.log(index);
					        	var id = next.attr("aid");
					         	var url = next.attr("id");
								var title = next.attr("title");
								console.log("id:"+id);
								console.log("url:"+url);
								console.log("title:"+title);
								$(".news_four.on").attr("class","news_four");
								$(next).addClass("on");
								$("#img_choosed").attr("src",url);	
								//给的链接
								$("#img_choosed_a").attr("href","/dogstore/news/detail?key="+id);
								$("#img_choosed_a").attr("title",title);
								index ++;
								$("#nextnum").attr("value",index);
				        	}else if(index == 4){
				        		next = $("#news_four>li").first();
				        		var id = next.attr("aid");
					         	var url = next.attr("id");
								var title = next.attr("title"); 
								console.log("id:"+id);
								console.log("url:"+url);
								console.log("title:"+title);
								$(".news_four.on").attr("class","news_four");
								next.addClass("on");
								$("#img_choosed").attr("src",url);	
								//给的链接
								$("#img_choosed_a").attr("href","/dogstore/news/detail?key="+id);
								$("#img_choosed_a").attr("title",title);
								index = 1;
								$("#nextnum").attr("value",index);
				        	}
					  	}, 2000);
					}else{
						layer.msg("轮播图区域出错! 找管理员!",{shift:6});
					}
				}
			);	
			
			//定时切换轮播大图片
			
			
			//读取最新文章
			/*
				<li class="kx-li">
					<a href="">
						<div class="time">08:24</div>
						<div class="tits">旅顺领养日 25只萌宠找到新家</div>
					</a>
				</li>
			*/
			//最新文章
			$.post("/dogstore/news/zuixin",
				{
					size:4
				},
				function (result){
					if(result != null){
						var list = JSON.parse(result);
						$("#kx").html("");
						$.each(list,function(i,item){
							//console.log(item.title);
							$("#kx").append(""+
								"<li class='kx-li'>"+
						           "<a href='/dogstore/news/detail?key="+item.id+"'>"+
								   	   "<div class='time'>"+item.uptimestr+"</div>"+
									   "<div class='tits'>"+item.title+"</div>"+
								   "</a>"+
						        "</li>"
							);
						});	
					}else{
						layer.msg("最新文章读取出错! 找prince!",{shift:6});
					}
				}
			);	
			
				/*
				<li class="pbox">
						<div class="img">
							<a href="" class="sort" target="_blank"> 北京宠物领养 </a>
							<a href="" target="_blank"  >
								<img src="images/client/adopt/1.jpg" title="北京西城救助白色母猫求好心人领养">
							</a>
						</div>
						<div class="word">
							<a href="" target="_blank">
								<h2>北京西城救助白色母猫求好心人领养</h2>
							</a>
							<div class="info">
								<div class="aut" style="float: left; margin: 0;"> 
									<a href="" target="_blank"> 
										<img src="images/client/adopt/user-1.gif" width="26" height="26"> 
										<span>wx_t7Wjb97B</span>
									 </a> 
								</div>
								<div class="time" style="float: left; margin: 0 0 0 20px;"> 
									<i></i> 
									<span>2017-01-15</span>
								</div>
								<div class="tags" style="margin: 0 0 0 20px;"> <i></i> 
									<a href="" title="165人围" target="_blank">165人围观
									</a>
								</div>
							</div>
							<div class="des">长毛那只已做绝育，未免疫，身体健康，蓝色眼睛非常好看，性格非常亲人，粘人。短毛那只未做绝育和免疫，是这两天刚刚请到屋子里的，和长毛那只一直...
							</div>
						</div>
					</li>
			*/
			//获取最新领养
			var index = layer.load(2, {time: 20000}); //缓冲3秒
			$.post("/dogstore/adopt/zxadopt",
				{
					size:6 
				},
				function(result){
					if(result != null){
						var list = JSON.parse(result);
						$("#zxadopt").html("");
						layer.close(index);
						$.each(list,function(i,item){
							$("#zxadopt").append(""+
								"<li class='pbox'>"+
									"<div class='img'>"+
										"<a href='/dogstore/adopt/detail?key="+item.id+"' class='sort' target='_blank'>"+item.title+"</a>"+
										"<a href='/dogstore/adopt/detail?key="+item.id+"' target='_blank'  >"+
											"<img src='images/client/adopt/1.jpg' title='"+item.title+"'>"+
										"</a>"+
									"</div>"+
									"<div class='word'>"+
										"<a href='/dogstore/adopt/detail?key="+item.id+"' target='_blank'>"+
											"<h2>"+item.title+"</h2>"+
										"</a>"+
										"<div class='info'>"+
											"<div class='aut' style='float: left; margin: 0;'>"+ 
												"<a href='/dogstore/adopt/detail?key="+item.id+"' target='_blank'>"+ 
													"<img src='images/client/adopt/user-1.gif' width='26' height='26'>"+ 
													"<span>"+item.senduser.username+"</span>"+
												 "</a>"+ 
											"</div>"+
											"<div class='time' style='float: left; margin: 0 0 0 20px;'>"+ 
												"<i></i>"+ 
												"<span>"+item.uptimestr+"</span>"+
											"</div>"+
											"<div class='tags' style='margin: 0 0 0 20px;'> <i></i>"+ 
												"<a href='/dogstore/adopt/detail?key="+item.id+"' title='"+item.looknum+"' target='_blank'>"+item.looknum+"人观看"+
												"</a>"+
											"</div>"+
										"</div>"+
										"<div class='des'>"+item.content+""+
										"</div>"+
									"</div>"+
								"</li>"
							);
						});	
					}else{
						layer.msg("最新萌宠读取出错! 找prince!",{shift:6});
					}
				}
			);
			
			//获取精选导读
			$.post("/dogstore/news/r",
				{
					 
				},
				function(result){
					
				}
			);
		};
		
	$(document).scroll(function(){
		//获取到顶部高度，当大于0的时候就显示出来，等于0的时候就隐藏
        var top = $(document).scrollTop();
        if(top >0){
        	//显示
            $("#share").css("display", "block");
        }else{
        	//隐藏
        	$("#share").css("display", "none");
        }
    });
		
	//点击轮播图
	function choose(li,id,url,title){
		$(".on").attr("class","news_four");
		$(li).addClass("on");
		$("#img_choosed").attr("src",url);
		$("#img_choosed_a").attr("href","/dogstore/news/detail?key="+id);
		$("#img_choosed_a").attr("title",title);
	}
</script>
</html>